<template>
	<div id="Class">
		<ul class="list-group">
		    <li class="list-group-item">班级名称 
		    	<input class="mustInput" type="text" placeholder="请填写班级名称" v-model="classesEdit.name" />
		    </li>
		    <li class="list-group-item sex">
	    		班级属性&nbsp;&nbsp;<input type="radio" name="sex" id="male" value="1" v-model="classesEdit.class_type" />
	    			<label for="male"> 实验班</label>
	    			<input type="radio" name="sex" id="female" value="2" v-model="classesEdit.class_type" />
	    			<label for="female"> 普通班</label>
	    	</li>
		    <li class="list-group-item">班级人数
				<input class="mustInput" type="text" style="width: 64%;" placeholder="请填写班级人数" v-model="classesEdit.total_number" />
		    </li>
			<router-link :to="{ name: 'addPerson' ,params: {role: 6 ,'gradeId':classesEdit.grade_id,'classId':classesEdit.class_id} }">
			    <li class="list-group-item xiaozhang">
	            	<img src="../assets/jiahao.png"/> 班主任
		                <ul class="list-group">
							<div v-for="(personne,key) in personnelArray" :key="key">
								<router-link :to="{ name: 'edit' , params: { index: key }}">
									<template v-if="personne.role == 6 && personne.class_id == classesEdit.class_id">
										<li class="list-group-item second" >{{ personne.name }}
				                            <span class="pull-right required">
				                                <img  src="../assets/write.png"/>
				                            </span>
										</li>
									</template>
								</router-link>
							</div>
		                </ul>
	            </li>
			</router-link>
            <router-link :to="{ name: 'addPerson' ,params: {role: 7,'gradeId':classesEdit.grade_id,'classId':classesEdit.class_id} }">
			    <li class="list-group-item xiaozhang">
	            	<img src="../assets/jiahao.png"/> 任课教师
		                <ul class="list-group">
							<div v-for="(personne,key) in personnelArray" :key="key">
								<router-link :to="{ name: 'edit' , params: {index: key }}">
									<template v-if="personne.role == 7 && personne.class_id == classesEdit.class_id">
										<li class="list-group-item second" >{{ personne.name }}
				                            <span class="pull-right required">
				                                <img  src="../assets/write.png"/>
				                            </span>
										</li>
									</template>
								</router-link>
							</div>
		                </ul>
	            </li>
			</router-link>
            <router-link :to="{ name: 'addPerson' ,params: {role: 8,'gradeId':classesEdit.grade_id,'classId':classesEdit.class_id} }">
			    <li class="list-group-item xiaozhang">
	            	<img src="../assets/jiahao.png"/> 班长
		                <ul class="list-group">
							<div v-for="(personne,key) in personnelArray" :key="key">
								<router-link :to="{ name: 'edit' , params: {index: key }}">
									<template v-if="personne.role == 8 && personne.class_id == classesEdit.class_id">
										<li class="list-group-item second" >{{ personne.name }}
				                            <span class="pull-right required">
				                                <img  src="../assets/write.png"/>
				                            </span>
										</li>
									</template>
								</router-link>
							</div>
		                </ul>
	            </li>
			</router-link>
		</ul>
		<!--按钮-->
		<div>
            <button type="button" @click="del()" class="btn btn-primary btn-lg btn-block del">删除</button>
			<button type="button" @click="add(classesEdit,1)" class="btn btn-primary btn-lg btn-block little">保存</button>
        </div>
		<!--按钮end-->
	</div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'Class',
  computed: {
      personnelArray () {
          return this.$store.state.system.personnelArray
      },
      classArray () {
          return this.$store.state.system.classArray
      },
      grade () {
          return this.$store.state.system.grade
      },
      classesEdit () {
          return this.$store.state.system.classesEdit
      },
      classNumber () {
          return this.$store.state.system.classNumber
      },
  },
  created () {
      this.init()  //初始化
  },
    watch: {
      '$route': 'init'
  },
  methods:{
    init() {
        this.$store.state.system.classesEdit = this.$store.state.system.classArray[this.$route.params.index]
    },
  	add(param,status) {
  		let row = this.checkData(param)
		if(row.status == 1)
		{
            layer.open(row.msg);
		    return false;
		}
        this.$store.state.system.classArray[this.$route.params.index] = param
//      console.log(param)
        layer.open(row.msg);
        this.empty()//添加成功数据清空
        if(status == 1) {
            this.$router.go(-1)
        }
  	},
  	del() {//删除班级 classArray
        this.$store.state.system.classArray.splice(this.$route.params.index, 1)
        this.$router.go(-1)
    },
  	empty() {  //清空数据
        this.$store.state.system.classesEdit = {
            school_id: null,//学校ID
            grade_id: null,//年级ID
            class_id: 1,//班级ID
            name:'',//班级名称
            class_type:1,//班级类型
            total_number:null,//班级人数
        }
	},
    checkData(param) {
        if(param.name == ""){
            return { status: 1, msg: {content: '请添写班级名称！', skin: 'msg', time: 2 }}
        }
        return { status: 0, msg: { content: '添加成功！', skin: 'msg', time: 2 }};
	}
  }
}
</script>

<style>
	.switch-btn {position: relative; display: block; vertical-align: middle;margin-top: 0.05rem; width: 0.75rem; /*height: 0.45rem;*/ border-radius: 18px; cursor: pointer;}
	.checked-switch {position: absolute; top: 0; left: 0; opacity: 0;}
	.text-switch {background-color: #999; border: 1px solid #999; border-radius: inherit; color: #fff; display: block; font-size: 15px; height: 0.35rem; position: relative; text-transform: uppercase;}
	.text-switch:before, .text-switch:after {position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit;}
	.text-switch:before {/*content: attr(data-no);*/ right: 11px;}
	.text-switch:after {/*content: attr(data-yes);*/ left: 11px; color: #FFFFFF; opacity: 0;}
	.checked-switch:checked ~ .text-switch {background-color: #4a79af; border: 1px solid #4a79af;}
	.checked-switch:checked ~ .text-switch:before {opacity: 0;}
	.checked-switch:checked ~ .text-switch:after {opacity: 1;}
	.toggle-btn {background: linear-gradient(#eee, #fafafa); border-radius: 100%; height: 0.3rem; left: 1px; position: absolute; top: 1px; width: 0.3rem;}
	.toggle-btn::before {color: #aaaaaa; display: inline-block; font-size: 12px; letter-spacing: -2px; padding: 4px 0; vertical-align: middle;}
	.checked-switch:checked ~ .toggle-btn {left: 0.43rem;}
	.text-switch, .toggle-btn {transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease;}
	button.little{
		width: 40%;
		float: left;
		margin-left: 0.5rem;
		padding: 0.15rem;
		background-color: #4a77b0;
		border: none!important;
	    outline: none!important;
	    font-size: 0.3rem;
	}
	button.btn-block{
		margin-top: 0.5rem;
	}
	.btn-block + .btn-block{
		margin-top: 0.5rem;
	}
	.btn:focus{
		background-color: #4a77b0;
		outline: none;
	}
	button.del{
		width: 40%;
		background-color: #f25151;
		border: 1px solid #f25151;
		float: left;
		height: 0.7rem;
		padding: 0;
		margin-left: 0.5rem;
	}
	.del:active{
		background-color: #f25151!important;
		border: 1px solid #f25151!important;
	}
	.right img{
 		width: 0.14rem;
 		height: 0.24rem;
 	}
 	.sex input[type="radio"] + label::before {
	    content: "\a0"; 
	    display: inline-block;
	    vertical-align: middle;
	    font-size: 0.18rem;
	    width: 0.36rem;
	    height: 0.36rem;
	    /*margin-right: 0.4rem;*/
	    border-radius: 50%;
	    border: 1px solid #ccc;
	    text-indent: 0.15rem;
	    /*line-height: 1;*/
	}
	.sex input[type="radio"]:checked + label::before {
	    background-color: #4a77b0;
	    border: 1px solid #4a77b0;
	    background-clip: content-box;
	    /*width: 0.18rem;
	    height: 0.18rem;*/
	    padding: 0.09rem;
	}
	.sex input[type="radio"] {
	    position: absolute;
	    clip: rect(0, 0, 0, 0);
	}
	.mustInput{
		text-indent: 1em;
	}
</style>